<template>
  <section class="home-box">
    <header @click="addNum">
      banner {{ nums }}
    </header>

    <nav>
      <div ref="backlog" class="backlog-box">
        待办事项
      </div>

      <div class="user-info-box">
        用户信息
      </div>
    </nav>

    <div class="my-product-box">
      <h3>
        <p>{{ productTitle }}</p>

        <span>卡号激活</span>
      </h3>

      <my-product-item v-for="item of 2"
                       :key="item"
                       :ref="setProductItem" num="123456" :remark="'说明文案' + item" @hello="showHelloMsg"
      />
    </div>

    <div class="get-product-box">
      <h3>
        <p>已获取子产品</p>

        <span>查看全部</span>
      </h3>

      <div class="get-product-item">
        防癌检测
      </div>
    </div>
  </section>
</template>

<script>
import myProductItem from './myProductItem.vue'
// import Vue from 'vue'
import { onMounted, ref, watch } from 'vue'

export default {
  components: { myProductItem },

  setup (props, context) {
    const nums = ref(0)

    const productItemList = ref([])

    watch([nums], (newVal, oldVal) => {
    })

    onMounted(() => {
      for (const key in productItemList.value) {
        console.log(productItemList.value[key])
      }
    })

    function setProductItem (el) {
      productItemList.value.push(el)
    }

    function showHelloMsg (data) {

      console.log('子组件传来的数据', data)
    }

    function addNum () {
      nums.value++
    }

    return {
      productTitle: ref(12581),
      nums,
      addNum,
      productItemList,

      setProductItem,

      showHelloMsg
    }
  }

}
</script>

<style lang="scss" scoped>
</style>
